<template>
    <div class="home-purchase">
      <Purchase :searchValue="pagination.searchValue" :goods="goods" @queryGoods="queryGoods"></Purchase>
      <Pagination :pagination="pagination" @currentChange="currentChange"></Pagination>
    </div>
  </template>

<script lang="ts" setup>
import { QueryPurchaseListAPI } from '../api/order'

const goods = ref([])

const pagination = ref({
  size: 10,
  total: 0,
  page: 1,
  searchValue: ''
});

onMounted(() => {
  getGoodsList()
})

function getGoodsList() {
    QueryPurchaseListAPI(pagination.value)
    .then((res) => {
      if (res.code === 200 && res.msg !== null) {
        goods.value = res.data.records
        pagination.value.total = res.data.total

      }
      if (res.code === 100 && res.msg !== null) {
        ElMessage.error(res.msg)
      }

    })
}

const currentChange = (val: number) => {
  pagination.value.page = val
  getGoodsList()
}

const queryGoods = (val: string) => {
  pagination.value.searchValue = val
  getGoodsList()
}
</script>

<style lang="less" scoped>
.home-purchase {
  width: 1500px;
  margin: 0 auto;
  display: flex; /* 添加此行以使用 flex 布局 */
  flex-direction: column; /* 添加此行以垂直排列子元素 */
  align-items: center; /* 添加此行以居*/
}
</style>;